<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/travel-page.css" />
		<style>
			.mui-plus .plus {
				display: inline;
			}
			
			.plus {
				display: none;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			
			p {
				text-indent: 22px;
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
			}
			
			.mui-popover {
				min-height: 180px;
				width: 150px;
			}
			
			.mui-content {
				padding: 10px;
			}
			
			.mui-btn {
				display: block;
				width: 120px;
				margin: 10px auto;
			}
			
			#info {
				padding: 20px 10px;
			}
			
			.mui-toast-container {
				bottom: 50% !important;
			}
			
			.mui-toast-message {
				height: 40px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<header class="mui-bar mui-bar-nav mui-bar-transparent">
				<a class="tm mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<a href="#topPopover" class="mui-icon mui-icon-more mui-icon-right-nav mui-pull-right"></a>
			</header>
			<footer class="mui-bar mui-bar-footer">
				<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
			</footer>
			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item mui-active" id="index">
					<span class="mui-icon mui-icon-home"></span>

				</a>
				<a class="mui-tab-item">
					<span class="mui-icon mui-icon-chatboxes" id="reply"></span>
					<span class="mui-tab-label">回复</span>
				</a>
				<a href="#" class="mui-tab-item" id="toastBtn">
					<span class="mui-icon mui-icon-star"></span>
					<span class="mui-tab-label">收藏</span>
				</a>
				<a href="#bottomPopover" class="mui-tab-item">
					<span class="mui-icon mui-icon-upload"></span>
					<span class="mui-tab-label">分享</span>
				</a>
			</nav>
			<!--<div class="head"></div>-->

			<div class="top">
				<div class="head"></div>
				<h1>云南，穿山越岭只为遇见你</h1>
				<div class="top-tr">
					<tr>
						<td>2017-09-04</td>
						<td>13298浏览</td>
						<td>·</td>
						<td>213回复</td>
					</tr>
				</div>
				<div class="body">
					<tr>
						<td>出发时间：2017/08/07</td>
						<td>人均费用：5000</td>
					</tr>
					<tr>
						<td>任务：一个人</td>
						<td>出行天数：7</td>
					</tr>
					<h2 class="h2">一波三折</h2>
					<p>
						在2017年的开头，我和黄已经计划好了暑假要去云南。5月底的时候她突然生病，不得不回她老家福建养病。云南行落空。2017年7月初，黄表示她七月中旬要回四川。于是我们计划她回四川后，八月初我们一起去福建玩儿，之后两人再回四川。七月中旬黄回四川后去医院复查，医生表示她不能劳累，也不宜来回奔波。福建行落空。2017年八月初，天天在家的我看着朋友圈同事们晒的美照流涎三尺。终于狠下心定了8月7日直飞大理的机票。云南行尘埃落定。
					</p>
				</div>

			</div>
		</div>
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#">消息</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">最近浏览</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">下载游记</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">阅读设置</a>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<div id="bottomPopover" class="mui-popover mui-popover-bottom">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#">QQ好友</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">QQ空間</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">朋友圈</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">微信好友</a>
						</li>
						
					</ul>
				</div>
			</div>

		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();

			mui('.mui-scroll-wrapper').scroll();

			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
			document.getElementById("toastBtn").addEventListener('tap', function() {
				mui.toast('收藏成功');
			});
			var index = document.getElementById("index");
			index.addEventListener("tap", function() {

				if(window.plus) {
					mui.openWindow({
						url: 'index.html',
						id: 'index.html',
						style: {},
						extras: {

						},
						show: {
							autoShow: true,
							aniShow: "slide-in-right",
							duration: 100
						},
						waiting: {
							autoShow: true,
							title: "加载中....",
							options: {}
						}
					})
				}
			})
			var reply = document.getElementById("reply");
			reply.addEventListener("tap", function() {

				if(window.plus) {
					mui.openWindow({
						url: 'travel-reply.html',
						id: 'travel-reply.html',
						style: {},
						extras: {

						},
						show: {
							autoShow: true,
							aniShow: "slide-in-right",
							duration: 100
						},
						waiting: {
							autoShow: true,
							title: "加载中....",
							options: {}
						}
					})
				}
			})
		</script>
	</body>

</html>